<template #slot-openCurd>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-goodInfo="{scope}">
				<good-info :item="scope.row"></good-info>
			</template>
			<template #table-column-couponInfo="{scope}">
				<coupon-info :item="scope.row"></coupon-info>
			</template>

			<template #table-column-platform="{scope}">
				{{ scope.row.source | dict_platform }}
			</template>

			<template #table-column-ysqLevel="{scope}">
				{{ scope.row.level }}
			</template>

			<template #slot-setSort="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template>
			<template #slot-add="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template>
		</cl-crud>

		<cl-form ref="cl-form">

        </cl-form>
	</div>
</template>

<script>
export default {
	name: 'open_crud',
	props: {
		value: {
			type: Number,
			default: () => {
                return 0
            }
		}
	},
	data() {
		return {
			crud: null,
			select: {
				specialType: 0
			},
			options: {
				specialTypeOp: [
					{
						value: 0,
						label: '大额券'
					},
					{
						value: 1,
						label: '天猫国际'
					},
					{
						value: 2,
						label: '品牌优选'
					},
					{
						value: 100,
						label: '百万补贴'
					}
				]
			}
		};
	},
	mounted() {
		if (this.value != 101) this.crud.hiddenColumn('num2', false);
		if (this.value === 106) this.crud.setData('table.columns[prop:num2].label', '无补贴数量')
	},
	methods: {
		setGoodsort(item) {
			const self = this;
			let app = this.$refs['cl-form'].open({
				props: {
					'label-width': '100px',
					width: '470px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'num',
						label: '数量',
						span: 16,
						value: item.num,
						component: {
							name: 'el-input'
						}
					},
					{
						prop: 'num2',
						label: '数量2',
						span: 16,
						value: item.num2,
						component: {
							name: 'el-input'
						}
					},
					{
						prop: 'level',
						label: '排序',
						span: 16,
						value: item.level,
						component: {
							name: 'el-input'
						}
					}
				],
				on: {
					submit({ data, close }) {                       
						self.$service.goodsMenagement.specialClassify
							.update({
								...data,
								id: item.id
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
			// 微信商品列表
			if (this.value === 106) app.setData('items[prop:num2].label', '无补贴数量');		
			// 隐藏数量2
			if (this.value === 101) app.hiddenItem('num2', true)
		},
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.specialClassify)
				.set('dict', {
					label: {
						delete: '删除'
					}
				})
				.set('table', {
					columns: [
						{
							label: '分类名',
							prop: 'mainName',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center'
                        },
                         {
							prop: 'num',
                            label: '数量',
                            align: 'center'
                        },
                        {
							prop: 'num2',
                            label: '数量2',
							align: 'center',
							hidden: true
						}
					],

					op: {
						layout: ['slot-setSort', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '70px',
						width: '400px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'num',
							label: '数量',
							span: 16,
							component: {
								name: 'el-input'
							}
						}
					]
				})
				.set('layout', [
					[],
					['data-table']
				])
				.done();          
			app.refresh({
				prop: 'createTime',
				order: 'desc',
				specialType: this.value
			});
        }
    }
};
</script>

<style lang="scss" scoped>
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}
.el-select {
	width: 100px;
}
</style>
